<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">

    <div id="app">
        <div class="content-header common-search-border1">
            <el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i> 新增企业
            </el-button>
        </div>
        <div class="app-container">
            <div class="box common-search-border2">
                <div class="filter-container">
                    <!-- 搜索栏 -->
                    <el-form :inline="true" :model="requestParameters" ref="requestParameters" class="formInfo">
                        <el-form-item label="企业简称" label-width="80px">
                            <el-input placeholder="请输入" v-model="requestParameters.shortName" style="width: 200px;"
                                class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" label-width="40px">
                            <el-select placeholder="请选择" v-model="requestParameters.isDis">
                                <el-option :key="item.id" :label="item.value" :value="item.id"
                                    v-for="item in baseData.isDis"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleRest">清除</el-button>
                            <el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="box common-table-border" style="margin:8px 0 0;">
                <el-table :key="tableKey" :data="items" fit highlight-current-row style="width: 100%;">
                    <el-table-column label="编号" width="50px" align="center" prop="id">
                    </el-table-column>

                    <el-table-column label="企业编号" align="center" prop="id">
                    </el-table-column>

                    <el-table-column label="企业简称" align="center" prop="shortName">  
                    </el-table-column>
                    
                    <el-table-column label="是否名企" align="center" >  
                        <template slot-scope="scope">
                            <span>{{ scope.row.isFamous === 0 ? '否' : '是' }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建日期" align="center" prop="createDate">
                    </el-table-column>

                    <el-table-column label="备注" align="center" prop="remark">
                    </el-table-column>
                    <el-table-column label="状态" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.state === 0 ? '启用' : '禁用' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
                        <template slot-scope="scope">
                            <div class="operation">
                                <el-button type="primary" size="mini" @click="handleDisable(scope.row)">
                                    <i class="fa fa-exclamation-circle" aria-hidden="true">
                                    </i> {{ scope.row.state === 0 ? '禁用' : '启用' }}
                                </el-button>

                                <el-button size="mini" type="danger" @click="handleDeleted(scope.row)">
                                    <i class="fa fa-trash-o" aria-hidden="true"></i> 删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination class="pagiantion" v-show="pagination.total>0" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page="pagination.pageNum"
                        :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
                    </el-pagination>
                </div>
            </div>
            <!-- 新增企业弹层 -->
            <el-dialog title="新增企业" align="center" :visible.sync="dialogFormVisible" width="40%" top="8vh">
                <el-form label-width="120px" :model="form" :rules="rules" ref="form">
                    <el-form-item label="企业简称：" prop="shortName">
                        <el-input v-model="form.shortName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="isFamous">
                        <el-checkbox-group v-model="form.isFamous" align="left">
                            <el-checkbox label="是否名企" name="isFamous"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="备注：" prop="remark">
                        <el-input v-model="form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleCreateCancel">取 消</el-button>
                    <el-button type="primary" @click="handleCreateConfirm">确 定</el-button>
                </div>
            </el-dialog>
            <!-- end -->
        </div>

    </div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../plugins/jquery/dist/jquery.js"></script>
<script src="../js/data.json"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/base.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableKey: 0,
                pagination: {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                loading: false,
                items: [],
                baseData: base,
                requestParameters: {
                    shortName: '',
                    isDis: ''
                },
                dialogFormVisible: false,
                form: {
                    shortName: '',
                    isFamous: '',
                    remark: ''
                },
                rules: {
                    shortName: [
                        { required: true, message: '请填写', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.getList()
        },
        
        methods: {
            getList() {
                let t = this;
                // 必传参数
                let params = {
                    pageNum: t.pagination.pageNum,  // 使用 pageNum 作为参数名
                    pageSize: t.pagination.pageSize,
                    queryParams: {}
                };
                // 选传参数
                let shortName = t.requestParameters.shortName;
                if (shortName) {
                    params.queryParams.shortName = shortName;
                }
                let isDis = t.requestParameters.isDis;
                if (isDis !== '') {
                    params.queryParams.isDis = isDis;
                }
                //发送请求
                axios.get(app_path + '/company/findAllCompanies', { params: params })
                    .then(response => {
                        console.log('Response data:', response.data); // 打印整个响应数据
                        const data = response.data.result;
                        this.items = data;
                        this.pagination.total = response.data.total;
                    })
                    .catch(error => {
                        console.error("出现错误!", error);
                    });

            },
            //Enter键查询
            handleFilter() {
                this.getList()
            },
            //清除
            handleRest() {
                this.requestParameters = {
                    shortName: '',
                    isDis: ''
                }
            },
            //搜索
            handleSearch() {
                this.getList();
            },
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getList();
            },
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getList();
            },
            // 新增企业
            handleCreate() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                this.dialogFormVisible = true;
            },
            //新增企业确定
            handleCreateConfirm() {
                this.$refs['form'].validate((valid) => {
            if (valid) {
                // 检查并设置 isFamous 字段的值
                let formData = Object.assign({}, this.form);
                formData.isFamous = formData.isFamous.length > 0 ? 0 : 1;

                axios.post(app_path + '/company/add', formData)
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success('企业添加成功');
                            this.dialogFormVisible = false;
                            this.getList(); // 刷新列表
                        } else {
                            this.$message.error('企业添加失败');
                        }
                    })
                    .catch(error => {
                        console.error('There was an error!', error);
                        this.$message.error('企业添加失败');
                    });
            } else {
                console.log('error submit!!');
                return false;
            }
        });
            },
            //新增企业取消
            handleCreateCancel() {
                this.dialogFormVisible = false;
            },
            // 禁用
            handleDisable(row) {
                let newStatus = row.state === 0 ? 1 : 0
                axios.post(app_path + '/company/updateCompanyStatus', { id: row.id, state: newStatus })
                    .then(response => {
                        console.log('Update status response:', response.data)
                        if (response.data.success) {
                            this.$message.success('状态更新成功')
                            this.getList() // 更新列表
                        } else {
                            this.$message.error('状态更新失败')
                        }
                    })
                    .catch(error => {
                        console.error('There was an error!', error)
                        this.$message.error('状态更新失败')
                    })
            },
        // 删除
        handleDeleted(row) {
            console.log('Deleting row:', row); // 打印行数据，确保方法正确调用
            this.$confirm('确定删除该企业吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            axios.post(app_path + '/company/delete',null, { params: { id: row.id } })
                .then(response => {
                    console.log('Delete response:', response.data);
                    if (response.data.success) {
                        this.$message.success('企业删除成功');
                        this.getList();  // 刷新列表
                    } else {
                        this.$message.error('企业删除失败: ' + response.data.message);
                    }
                })
                .catch(error => {
                    this.$message.error('企业删除失败: ' + error.message);
                });
        }).catch(() => {
            this.$message.info('已取消删除');
        });
    }
}})
</script>

</html>